{% load static %}
{% load i18n %}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <title>{% translate "Employee onboarding" %}</title>
    <link rel="icon" type="image/x-icon" href="{% static 'favicon.png' %}">
    <!-- CSS files -->
    <link rel="stylesheet" href="{% static 'css/theme.css' %}">
    <link rel="stylesheet" href="{% static 'css/extra.css' %}">
    <style>
      .btn-primary, .btn-outline-primary, .btn-ghost-primary, .btn-primary:hover, .btn-outline-primary:hover, .btn-ghost-primary:hover, .border-primary, .navbar {
        --tblr-primary: rgb({{ org.base_color_rgb }});
        --tblr-btn-hover-bg: rgb({{ org.base_color_rgb }});
        --tblr-primary-rgb: {{ org.base_color_rgb }};
        --tblr-primary-darker: rgb({{ org.base_color_rgb }});
      }
      a, a:hover, a:focus {
        color: rgb({{ org.base_color_rgb }})
      }
      .form-control:focus {
        color: inherit;
        background-color: #ffffff;
        border-color: rgb({{ org.base_color_rgb }});
        outline: 0;
        box-shadow: 0 0 0 0.25rem rgba({{ org.base_color_rgb }}, 0.25);
      }
      .page-item.active .page-link {
        background-color: rgb({{ org.base_color_rgb }});
        border-color: rgb({{ org.base_color_rgb }});
      }
      .page-link:hover {
        color: rgb({{ org.base_color_rgb }});
      }
      .form-check-input:checked, .bg-primary  {
        background-color: rgb({{ org.base_color_rgb }}) !important;
      }
    </style>
  </head>
  <body class="">
    <div class="wrapper">
      {% block header %}
      <header class="navbar navbar-expand-md navbar-dark navbar-overlap d-print-none" style="background-color: {{ org.base_color }}">
        <div class="container-xl">
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
            <span class="navbar-toggler-icon"></span>
          </button>
          {% if org.get_logo_url != "" %}
          <h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
            <a href=".">
              <img src="{{ org.get_logo_url }}" class="navbar-brand-image" width="110" height="32">
            </a>
          </h1>
          {% endif %}
          <div class="navbar-nav flex-row order-md-last">
            <div class="nav-item dropdown d-none d-md-flex me-3" onclick="updateSeen()">
              <div class="dropdown">
                <a class="nav-link dropdown-toggle" href="#navbar-templates" data-bs-toggle="dropdown" role="button" aria-expanded="false">
                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" /><path d="M9 17v1a3 3 0 0 0 6 0v-1" /></svg>
                  {% if request.user.has_new_hire_notifications %}
                    <span class="badge bg-red"></span>
                  {% endif %}
                </a>
                <div class="dropdown-menu dropdown-menu-card dropdown-menu-right" style="width: 30rem;">
                  <div class="card d-flex flex-column">
                    <div class="card-body d-flex flex-column">
                      <h3 class="card-title">Notifications</h3>
                      <div class="list-group list-group-flush list-group-hoverable">
                        {% for notification in request.user.notification_receivers.all %}
                          {% if notification.public_to_new_hire %}
                          <div class="list-group-item">
                            <div class="row align-items-center">
                              {% if notification.has_not_seen %}
                                <div class="col-auto"><span class="badge bg-primary"></span></div>
                              {% endif %}
                              <div class="col text-truncate">
                                {% if notification.full_link == "" %}
                                <p class="text-reset d-block mb-0">{{ notification.get_notification_type_display }}:<br> <strong>{{ notification.extra_text }}</strong></p>
                                {% else %}
                                  <a href="{{ notification.full_link }}" class="text-reset d-block mb-0">{{ notification.get_notification_type_display }}: {{ notification.extra_text }}</a>
                                {% endif %}
                              </div>
                            </div>
                          </div>
                          {% endif %}
                        {% empty %}
                          No notifications yet
                        {% endfor %}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="nav-item dropdown">
              <a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
                {% include "_profile_image.html" with user=request.user %}
                <div class="d-none d-xl-block ps-2">
                  <div>{{ user.full_name }}</div>
                  <div class="mt-1 small text-muted">{{ user.get_role_display }}</div>
                </div>
              </a>
              <div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
                <form method="post" action="{% url 'account_logout' %}">
                  {% csrf_token %}
                  <button class="dropdown-item">{% translate "Logout" %}</button>
                </form>
              </div>
            </div>
          </div>
          <div class="collapse navbar-collapse" id="navbar-menu">
            <div class="d-flex flex-column flex-md-row flex-fill align-items-stretch align-items-md-center">
              {% if 'preboarding' not in request.path %}
              <ul class="navbar-nav">
                {% if request.user.role == 0 %}
                <li class="nav-item {% if 'todos' in request.path %}active{% endif %}">
                  <a class="nav-link" href="{% url 'new_hire:todos' %}">
                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/home -->
                      <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-circle-check" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                        <circle cx="12" cy="12" r="9"></circle>
                        <path d="M9 12l2 2l4 -4"></path>
                      </svg>
                    </span>
                    <span class="nav-link-title">
                      {% translate "To do items" %}
                    </span>
                  </a>
                </li>
                {% endif %}
                <li class="nav-item {% if 'resources' in request.path %}active{% endif %}">
                  <a class="nav-link" href="{% url 'new_hire:resources' %}">
                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/home -->
                      <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-folders" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                        <path d="M9 4h3l2 2h5a2 2 0 0 1 2 2v7a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-9a2 2 0 0 1 2 -2"></path>
                        <path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-9a2 2 0 0 1 2 -2h2"></path>
                      </svg>
                    </span>
                    <span class="nav-link-title">
                      {% translate "Resources" %}
                    </span>
                  </a>
                </li>
                <li class="nav-item {% if 'colleagues' in request.path %}active{% endif %}">
                  <a class="nav-link" href="{% url 'new_hire:colleagues' %}">
                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/home -->
                      <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-users" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                        <circle cx="9" cy="7" r="4"></circle>
                        <path d="M3 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"></path>
                        <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
                        <path d="M21 21v-2a4 4 0 0 0 -3 -3.85"></path>
                      </svg>
                    </span>
                    <span class="nav-link-title">
                      {% translate "Colleagues" %}
                    </span>
                  </a>
                </li>
              </ul>
              {% endif %}
            </div>
          </div>
        </div>
      </header>
      {% endblock %}
      <div class="page-wrapper">
        <div class="container-xl">
          <!-- Page title -->
          <div class="page-header text-white d-print-none">
            <div class="row align-items-center">
              <div class="col">
                <!-- Page pre-title -->
                <h2 class="page-title">{{ title }}</h2>
                <div class="page-pretitle">
                  {{ subtitle }}
                </div>
              </div>
              <!-- Page title actions -->
              {% for message in messages %}
              <div class="alert alert-success" style="color: black;">
                {{ message }}
              </div>
            {% endfor %}
              {% block actions %}
              {% endblock %}
            </div>
          </div>
        </div>
        <div class="page-body">
          <div class="container-xl">
            {% block content %}{% endblock %}
          </div>
        </div>
      </div>
      <div id="bin">
      </div>
    </div>
    <script src="{% static 'js/tabler.js' %}"></script>
    <script src="{% static 'js/htmx-1.7.0.min.js' %}" type="text/javascript"></script>
    <script src="{% static 'js/jquery-3.5.1.min.js' %}" type="text/javascript"></script>
    <script>
      document.body.addEventListener('htmx:configRequest', function(event) {
        event.detail.headers['X-CSRFToken'] = '{{ csrf_token }}';
      })
    </script>
    <script>
      function updateSeen() {
          htmx.ajax("get", "{% url 'new_hire:seen-updates' %}", "#bin")
      }
    </script>
    {% block extra_js %}{% endblock %}
  </body>
</html>
